<template>
    <div class="referCheck">
        <checkCard title="审批人"
                   :depts="depts"
                   :members="checkMan"
                   @delMember="delCheckMan"
                   @addMember="addCheckMan"
                   class="referCheck-card-man">
            <el-button slot="reference"
                       type="text"
                       icon="el-icon-circle-plus-outline">添加审批人</el-button>
        </checkCard>
        <checkCard title="添加抄送人"
                   :depts="depts"
                   :members="deputy"
                   @delMember="delDeputy"
                   @addMember="addDeputy"
                   class="referCheck-card-deputy">
            <el-button slot="reference"
                       type="text"
                       icon="el-icon-circle-plus-outline">添加抄送人</el-button>
        </checkCard>
        <footer class="referCheck-footer">
            <el-button type="success"
                       size="small"
                       :disabled="disabled"
                       class="referCheck-footer-button margin"
                       @click="confirm">确定</el-button>
            <el-button type="danger"
                       size="small"
                       class="referCheck-footer-button"
                       @click="cancel">取消</el-button>
        </footer>
    </div>
</template>
<script>
import checkCard from '../component/checkCard'

export default {
    name: 'referCheck',
    props: {
        params: Object
    },
    components: {
        checkCard
    },
    data() {
        return {
            checkMan: [],
            deputy: [],
            depts: []
        }
    },
    computed: {
        disabled() {
            return this.checkMan.length === 0 || this.deputy.length === 0
        }
    },
    methods: {
        delCheckMan(member) {
            this.checkMan = this.checkMan.filter(item => item.id !== member.id)
            const dept = this.depts.find(item => item.department_id === member.department_id)
            dept.members.push(member)
        },
        delDeputy(member) {
            this.deputy = this.deputy.filter(item => item.id !== member.id)
            const dept = this.depts.find(item => item.department_id === member.department_id)
            dept.members.push(member)
        },
        addCheckMan(member) {
            this.checkMan.push(member)
            const dept = this.depts.find(item => item.department_id === member.department_id)
            const members = dept.members.filter(item => item.id !== member.id)
            this.$set(dept, 'members', members)
        },
        addDeputy(member) {
            this.deputy.push(member)
            const dept = this.depts.find(item => item.department_id === member.department_id)
            const members = dept.members.filter(item => item.id !== member.id)
            this.$set(dept, 'members', members)
        },
        confirm() {
            const checkManId = this.checkMan.map(item => item.user_id).join(',')
            const deputyId = this.deputy.map(item => item.user_id).join(',')
            const params = {
                ids: this.params.ids,
                applicant_id: checkManId,
                duplicates_id: deputyId
            }
            this.$store.dispatch('submitAudit', params).then(() => {
                this.$message({
                    type: 'success',
                    message: '提交审核成功'
                })
            })
            this.$router.push({ query: {} })
        },
        cancel() {
            this.$router.push({ query: {} })
        }
    },
    created() {
        this.$http.post('/Company/lists').then(data => {
            this.depts = data.data.data
        })
    }
}
</script>
<style lang='less'>
.referCheck {
    display: flex;
    flex-direction: column;

    &-card-man {
        padding: 20px;
        flex: 1;
    }

    &-card-deputy {
        padding: 20px;
        flex: 3;
    }

    &-footer {
        padding: 20px;
        text-align: center;
        border-top: 1px solid #ddd;

        &-button {
            width: 120px;
        }

        .margin {
            margin-right: 50px;
        }
    }
}
</style>
